<template>
	<div class="con_left">
		<!-- 数据统计 -->
		<div class="leftcon_top">
			<!-- 工单总数 -->
			<div class="order_box flex flex-between align-items-center">
				<p>工单总数：</p>
				<div class="order_span" v-if="num">
					<img :src="img1" alt="" class="img1">
					<img :src="img2" alt="" class="img2">
					<img :src="img3" alt="" class="img3">
					<img :src="img4" alt="" class="img4">
					<div class="span_box flex">
						<span v-for="(item1, ind) in num" :key="ind">
							{{ item1 }}
						</span>
					</div>
				</div>
			</div>
			<div class="flex flex-wrap">
				<!-- 当日工单 -->
				<div class="order_box order_con1 flex flex-direction">
					<p>当日工单（件）：</p>
					<div class="flex flex-end">
						<div class="order_span" v-if="num">
							<img :src="img1" alt="" class="img1">
							<img :src="img2" alt="" class="img2">
							<img :src="img3" alt="" class="img3">
							<img :src="img4" alt="" class="img4">
							<div class="">
								<div class="span_box flex flex-end">
									<span v-for="(item1, ind) in todayNum" :key="ind">
										{{ item1 }}
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 当前待督办工单 -->
				<div class="order_box order_con1 flex flex-direction">
					<p>当前待督办工单（件）：</p>
					<div class="flex flex-end">
						<div class="order_span" v-if="num">
							<img :src="img1" alt="" class="img1">
							<img :src="img2" alt="" class="img2">
							<img :src="img3" alt="" class="img3">
							<img :src="img4" alt="" class="img4">
							<div class="span_box flex flex-end">
								<span v-for="(item1, ind) in ddbNum" :key="ind">
									{{ item1 }}
								</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 当日待处理工单 -->
				<div class="order_box order_con1 flex flex-direction">
					<p>当日待处理工单（件）：</p>
					<div class="flex flex-end">
						<div class="order_span" v-if="num">
							<img :src="img1" alt="" class="img1">
							<img :src="img2" alt="" class="img2">
							<img :src="img3" alt="" class="img3">
							<img :src="img4" alt="" class="img4">
							<div class="span_box flex flex-end">
								<span v-for="(item1, ind) in dclNum" :key="ind">
									{{ item1 }}
								</span>
							</div>
						</div>
					</div>
				</div>
				<!-- 当日已处理工单 -->
				<div class="order_box order_con1 flex flex-direction">
					<p>当日已处理工单（件）：</p>
					<div class="flex flex-end">
						<div class="order_span flex flex-end" v-if="num">
							<img src="../../assets/images/content/span1.png" alt="" class="img1">
							<img src="../../assets/images/content/span2.png" alt="" class="img2">
							<img src="../../assets/images/content/span3.png" alt="" class="img3">
							<img src="../../assets/images/content/span4.png" alt="" class="img4">
							<div class="span_box flex flex-end">
								<span v-for="(item1, ind) in yclNum" :key="ind">
									{{ item1 }}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 中间统计图 -->
		<div class="leftcon_middle flex flex-between">
			<div class="middle1">
				<checked-title :title="titleSource" />
				<div class="echarts" id="echarts1" ref="echarts1"></div>
			</div>
			<div class="middle2">
				<checked-title :title="titleType"></checked-title>
				<div class="echarts" id="echarts2" ref="echarts2"></div>
			</div>
		</div>
		<!-- 底部统计图 -->
		<div class="leftcon_btm">
			<checked-title :title="titleStreet">
				<!-- <template #right v-if="titleDepart">
					<p class="title2">{{titleDepart}}</p>
				</template> -->
			</checked-title>
			<div class="echarts" id="echarts3" ref="echarts3"></div>
		</div>
	</div>
</template>
<script>
const baseUrl = process.env.VUE_APP_BASE_URL;
import highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(highcharts);
import https from '@request/https'
export default {
	data() {
		return {
			img1: require("../../assets/images/content/span1.png"),
			img2: require("../../assets/images/content/span2.png"),
			img3: require("../../assets/images/content/span3.png"),
			img4: require("../../assets/images/content/span4.png"),
			num: "0", //工单总数
			todayNum: "0", //当日工单数
			ddbNum: "0", //待督办工单数
			dclNum: "0", //待处理工单数
			yclNum: "0", //已处理工单数
			titleSource: "问题来源统计",
			titleType: "工单类型占比",
			titleStreet: "街办工单",
			titleDepart: "职能部门工单",
			sourceDate: {
				maximum: [],
				xData: [],
				numTotal: []
			},
			sourceDate1: { // 轮播
				index: 1,
				maximum: [],
				xData: [],
				numTotal: []
			},
			typeNum: {
				xData: [],
				numTotal: [],
				allArray: [],
			},
			typeNum1: { // 轮播
				index: 1,
				xData: [],
				numTotal: [],
				allArray: [],
			},
			dayData: {
				xData: [],
				numTotal: [],
			},
			canclick: true,
			timer5: null,
			timerAll: null,
			myChart1: null,
		};
	},
	created() {
		this.getWorkStatistics()
	},
	watch: {
		sourceDate1: {
			deep: true, //深度监听设置为 true
			handler: function () {
				this.echarts1();
			},
		},
		typeNum: {
			deep: true, //深度监听设置为 true
			handler: function () {
				this.echarts2();
			},
		},
		dayData: {
			deep: true, //深度监听设置为 true
			handler: function () {
				this.echarts3();
			},
		}
	},
	mounted() {
		// setTimeout(function() {
		//   window.onresize = function() {
		//     // myChart1.resize();
		this.$nextTick(() => {
			this.getSource()
			this.getProportion()
			this.getDay();
		});
		//   };
		// }, 200);
		this.timerAll = setInterval(() => {
			var num = 4;
			if (this.sourceDate1.index * num >= this.sourceDate.maximum.length) {
				this.sourceDate1.index = 1
				this.sourceDate1.maximum = this.sourceDate.maximum.slice(0, 4)
				this.sourceDate1.xData = this.sourceDate.xData.slice(0, 4)
				this.sourceDate1.numTotal = this.sourceDate.numTotal.slice(0, 4)
			} else {
				this.sourceDate1.maximum = this.sourceDate.maximum.slice(this.sourceDate1.index * num, this
					.sourceDate1.index * num + 4)
				this.sourceDate1.xData = this.sourceDate.xData.slice(this.sourceDate1.index * num, this
					.sourceDate1.index * num + 4)
				this.sourceDate1.numTotal = this.sourceDate.numTotal.slice(this.sourceDate1.index * num, this
					.sourceDate1.index * num + 4)
				this.sourceDate1.index++;
			}
			// 街办和职能部门切换
			if (this.canclick) {
				if (this.titleStreet == '街办工单') {
					this.titleStreet = '职能部门工单'
				} else {
					this.titleStreet = '街办工单'
				}
				this.getDay()
			}
		}, 5000)
	},
	// watch: {
	//   datas: {
	//     deep: true,
	//     //深度监听设置为 true
	//     handler: function () {
	//       // this.setOptions(val);
	//       this.echarts1();
	//     },
	//   },
	// },
	methods: {
		// 工单数量统计-接口
		getWorkStatistics() {
			var api = `${baseUrl}/bigData/orderInfo`
			https.GetRequest(api).then(res => {
				if (res.data.code == 200) {
					var datas = res.data.data
					this.num = String(datas.orderNumAll); //工单总数
					this.todayNum = String(datas.orderNumNow); //当日工单数
					this.ddbNum = String(datas.orderNumOversee); //待督办工单数
					this.dclNum = String(datas.orderNumDo); //待处理工单数
					this.yclNum = String(datas.orderNumEnd); //已处理工单数
				} else {
					this.$notify.error({
						title: '错误',
						message: res.data.message
					});
				}
			}).catch(err => {
			})
		},
		//   两个工单切换
		changeTitle() {
			// this.titleDepart = this.titleStreet;
			// this.titleStreet = info;
			if (this.canclick) {
				if (this.titleStreet == '街办工单') {
					this.titleStreet = '职能部门工单'
				} else {
					this.titleStreet = '街办工单'
				}
				this.getDay()
			}
		},
		//   图表
		echarts1() {
			let myChart1 = echarts.init(this.$refs.echarts1);
			// if(myChart1){
			// 	myChart1.resize();
			// }
			var grayBar = this.sourceDate1.maximum;
			// var grayBar = [80,80,80,80,80];
			var option1 = {
				grid: {
					// left: "-7rem", // 距离dom间距
					// right: "3%",
					// top: "3%",
					// bottom: "3%",
					// containLabel: true,
					left: "-9rem",
					right: "-2rem",
					bottom: "3%",
					top: "5%",
					containLabel: true,
				},
				xAxis: [{
					type: "value",
					// 横坐标 分割线等取消显示
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					splitLine: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
				},],
				yAxis: [
					// 左边的字
					{
						type: "category",
						inverse: true,
						axisLabel: {
							verticalAlign: "bottom",
							align: "left",
							padding: [0, 10, 10, 6],
							textStyle: {
								fontSize: 12,
								color: "white",
								fontFamily: "Source Han Sans CN",
							},
							formatter(value, index) {
								index += 1;
								return `{text1|${value}}`;
							},
							rich: {},
						},
						// 纵坐标数据
						data: this.sourceDate1.xData,
						yAxisIndex: 0,
						// 横坐标 分割线等取消显示
						axisTick: {
							show: false,
						},
						axisLine: {
							show: false,
						},
					},
					//   右边的字
					{
						type: "category",
						inverse: true,
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							show: true,
							inside: false,
							verticalAlign: "bottom",
							align: "right",
							// 位置 上右下左
							padding: [0, 0, 0, 0],
							lineHeight: "30",
							textStyle: {
								fontSize: 12,
								color: "#8BE5FF",
								fontFamily: "Source Han Sans SC",
							},
						},
						// 统计的总量 用纵坐标模拟
						data: this.sourceDate1.numTotal,
					},
				],
				series: [{
					show: true,
					type: "pictorialBar",
					symbol: "fixed",
					symbolSize: [5, 10],
					symbolMargin: 3,
					symbolRepeat: "repeat",
					barWidth: 5, // 统计条宽度
					itemStyle: {
						normal: {
							color: "#0DCDFF",
						},
					},
					z: 3,
					data: this.sourceDate1.numTotal,
				},
				//   底部100%的块
				{
					show: true,
					type: "pictorialBar",
					symbol: "fixed",
					symbolSize: [5, 10],
					symbolMargin: 3,
					// symbolRepeat: "repeat",
					symbolRepeat: "fixed",
					// barGap: "100%",
					barWidth: 5, // 统计条宽度
					itemStyle: {
						normal: {
							color: "rgba(13, 205, 255, 0.25)",
						},
					},
					z: 0,
					data: grayBar,
				},
				],
			};
			myChart1.setOption(option1);
		},
		echarts2() {
			var chart = highcharts.chart("echarts2", {
				chart: {
					type: "pie",
					backgroundColor: "rgba(0,0,0,0)",
					options3d: {
						enabled: true, //显示图表是否设置为3D， 我们将其设置为 true
						alpha: 55, //图表视图旋转角度
					},
				},
				title: {
					text: "",
				},
				legend: {
					enabled: false,
					floating: "true",
					align: "center", //程度标的目标地位
					verticalAlign: "bottom", //垂直标的目标地位
					horizontalAlign: "center",
					x: -20, //间隔x轴的间隔
					y: 0, //间隔Y轴的间隔
					icon: "rect",
					data: this.typeNum.xData,
					itemStyle: {
						color: "#fff",
						fontSize: 12,
					},
					// labelFormatter: function () {
					//   return (
					//     this.name +
					//     "<b>  " +
					//     highcharts.numberFormat(this.percentage, 1) +
					//     "%"
					//   );
					// },
				},
				credits: {
					enabled: false, // 禁用版权信息
				},
				tooltip: {
					formatter: function () {
						return (
							" <b> " +
							this.point.name +
							" </b>: " +
							highcharts.numberFormat(this.percentage, 1) +
							" % " +
							highcharts.numberFormat(this.y, 0, " , ")
						);
					},
				},
				plotOptions: {
					pie: {
						allowPointSelect: true, //每个扇块能否选中
						cursor: "pointer", //鼠标指针
						innerSize: 50,
						depth: 15, //饼图的厚度
						dataLabels: {
							allowPointSelect: true,
							enabled: true, //是否显示饼图的线形tip
							softConnector: false,
							distance: 10,
							// distance: -30,
							// formatter: function() {
							//   return '<span style="color:#fff">'+ this.point.name +' '+ highcharts.numberFormat(this.percentage, 2)+'%</span>';
							// }
							// color: "#fff"
						},
					},
				},
				colors: ["#3DA9C1", "#DF711D", "#F5C155", "#77C5EF", "#2361AD", "#01A8FF", "#FDEF06",
					"#B40DBA", '#057E86', '#F8B551', '#F33635', '#21D3FF'
				],
				series: [{
					name: "工单类型占比",
					showInLegend: true,
					clockWise: true,
					center: ["50%", "50%"],
					data: this.typeNum.allArray,
				},],
			});
			var activePoint = 0;
			clearInterval(this.timer5);
			this.timer5 = null;
			this.timer5 = setInterval(function () {
				if (activePoint === chart.series[0].data.length) {
					activePoint = 0;
				}
				chart.tooltip.refresh(chart.series[0].data[activePoint]);
				activePoint++;
			}, 5000);
		},
		echarts3() {
			var myChart3 = echarts.init(this.$refs.echarts3);
			var option3 = {
				color: [
					"rgba(253, 239, 6, 0.7)", //浅黄色
					"#FDEF06", //深黄色
					"rgba(33, 211, 255, 0.7)", //浅蓝色
					"rgba(33, 211, 255, 1)", //深蓝色
					// "#FDEF05"
					// "rgba(253, 239, 5, 0.5)",
					// "rgba(253, 239, 5, 0.2)",
					// "#03387a",
					// "#03387a",
					// "#03387a",
					// "#6c93ee",
					// "#a9abff",
					// "#f7a23f",
					// "#27bae7",
					// "#ff6d9d",
					// "#cb79ff",
					// "#f95b5a",
					// "#ccaf27",
					// "#38b99c",
					// "#93d0ff",
					// "#bd74e0",
					// "#fd77da",
					// "#dea700"
				],
				legend: {
					show: true,
					itemWidth: 10, // 图例图形宽度
					itemHeight: 10, // 图例图形高度
					textStyle: {
						color: "#fff", // 图例文字颜色
					},
					x: "right",
					y: "10",
					data: ["今日工单数量"],
				},
				grid: {
					left: "0%",
					right: "0%",
					bottom: "0%",
					top: "20%", //去掉标题，图表整体往上移动
					containLabel: true,
				},
				xAxis: {
					axisLabel: {
						color: "#fff",
						fontSize: 14,
						interval: 0,
						rotate: 50,
						formatter: function (params) {
							var val = "";
							if (params.length > 4) {
								val = params.substr(0, 4) + '...';
								return val;
							} else {
								return params;
							}
						}
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					data: this.dayData.xData,
					type: "category",
				},
				yAxis: {
					nameTextStyle: {
						color: "#fff",
						padding: [0, 0, -10, 0],
						fontSize: 14,
					},
					axisLabel: {
						color: "#fff",
						fontSize: 14,
					},
					axisTick: {
						lineStyle: {
							color: "#fff",
							width: 1,
						},
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(48, 219, 229, 0.2)",
							type: "dashed",
						},
					},
					axisLine: {
						show: false,
					},
				},
				series: [{
					name: "今日工单数量",
					data: this.dayData.numTotal,
					type: "bar",
					barMaxWidth: "auto",
					barWidth: 20,
					itemStyle: {
						color: "rgba(253, 239, 5, 0.5)",
					},
					label: {
						show: true,
						position: "top",
						distance: 10,
						color: "#fff",
					},
				},
				{
					data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
					type: "pictorialBar",
					barMaxWidth: "16",
					symbol: "diamond",
					symbolOffset: ["0%", "55%"],
					symbolSize: [20, 10],
				},
				{
					data: this.dayData.numTotal,
					type: "pictorialBar",
					barMaxWidth: "16",
					symbolPosition: "end",
					symbol: "diamond",
					symbolOffset: ["0%", "-50%"],
					symbolSize: [20, 10],
					zlevel: 2,
				},
					// {
					//   name: "工单总数",
					//   data: [200, 185, 112, 275, 305, 415],
					//   type: "bar",
					//   barMaxWidth: "auto",
					//   barWidth: 20,
					//   itemStyle: {
					//     color: "rgba(33, 211, 255, 0.5)",
					//   },
					//   label: {
					//     show: true,
					//     position: "top",
					//     distance: 10,
					//     color: "#fff",
					//   },
					// },
					// {
					//   data: [1, 1, 1, 1, 1, 1, 1, 1],
					//   type: "pictorialBar",
					//   barMaxWidth: "20",
					//   symbol: "diamond",
					//   symbolOffset: ["60%", "40%"],
					//   symbolSize: [20, 10],
					// },
					// {
					//   data: [200, 185, 112, 275, 305, 415],
					//   type: "pictorialBar",
					//   barMaxWidth: "20",
					//   symbolPosition: "end",
					//   symbol: "diamond",
					//   symbolOffset: ["60%", "-40%"],
					//   symbolSize: [20, 10],
					//   zlevel: 2,
					// },
				],
				// tooltip: {
				//   trigger: "axis",
				//   show: false
				// }
			};
			myChart3.setOption(option3);
		},
		// 问题来源统计-接口
		getSource() {
			var api = `${baseUrl}/bigData/staFromNum`
			https.GetRequest(api).then(res => {
				if (res.data.code == 200) {
					var lists = res.data.data
					var result = Math.max(...lists.map(x => x.num)) + 10;
					for (var i = 0; i < lists.length; i++) {
						this.sourceDate.maximum[i] = result
						this.sourceDate.xData.push(lists[i].name)
						this.sourceDate.numTotal.push(lists[i].num)
					}
					this.sourceDate1.maximum = this.sourceDate.maximum.slice(0, 4)
					this.sourceDate1.xData = this.sourceDate.xData.slice(0, 4)
					this.sourceDate1.numTotal = this.sourceDate.numTotal.slice(0, 4)
					// this.echarts1();
				} else {
					this.$notify.error({
						title: '错误',
						message: res.data.message
					});
				}
			}).catch(err => {
			})
		},
		// 工单类型占比-接口
		getProportion() {
			var api = `${baseUrl}/bigData/orderTypePro`
			https.GetRequest(api).then(res => {
				if (res.data.code == 200) {
					var datas = res.data.data
					for (var i = 0; i < datas.length; i++) {
						this.typeNum.xData.push(datas[i].name)
						this.typeNum.numTotal.push(datas[i].num)
					}
					for (var k = 0; k < this.typeNum.xData.length; k++) {
						var arr1 = []
						arr1.push(String(this.typeNum.xData[k]), Number(this.typeNum.numTotal[k]))
						this.typeNum.allArray.push(arr1)
					}
					// this.typeNum1.xData = this.typeNum.xData.slice(0, 4)
					// this.typeNum1.numTotal = this.typeNum.numTotal.slice(0, 4)
					// this.typeNum1.allArray = []
					// for(var k=0;k<this.typeNum1.xData.length;k++) {
					//   var arr1 = []
					//   arr1.push(String(this.typeNum1.xData[k]), Number(this.typeNum1.numTotal[k]))
					//   this.typeNum1.allArray.push(arr1)
					// }
					this.echarts2();
				} else {
					this.$notify.error({
						title: '错误',
						message: res.data.message
					});
				}
			}).catch(err => {
			})
		},
		// 每日工单-接口
		getDay() {
			if (this.canclick) {
				this.canclick = false
				var type = ''
				if (this.titleStreet == '街办工单') {
					type = 1
				} else {
					type = 2
				}
				var api = `${baseUrl}/bigData/orderNumByDepart`
				var params = {
					type: type
				}
				https.GetRequest(api, params).then(res => {
					if (res.data.code == 200) {
						var datas = res.data.data
						this.dayData.xData = []
						this.dayData.numTotal = []
						for (var i = 0; i < datas.length; i++) {
							this.dayData.xData.push(datas[i].name)
							this.dayData.numTotal.push(datas[i].num)
						}
						this.canclick = true
						this.echarts3()
					} else {
						this.canclick = true
						this.$notify.error({
							title: '错误',
							message: res.data.message
						});
					}
				}).catch(err => {
				})
			}
		},
	},
	beforeDestroy() {
		//清除定时器
		clearInterval(this.timer5);
		clearInterval(this.timerAll)
	},
};
</script>
<style lang="less" scoped>
.con_left {
	height: 100%;

	// margin-right: 1rem;
	padding: 2.5rem;
	// flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	//   头部
	.leftcon_top {
		// height: 32%;

		.order_box {
			margin-bottom: 3rem;

			p {
				font-size: 1.6rem;
				font-family: Microsoft YaHei;
				color: #9ed5ff;
			}

			.order_span {
				width: auto;
				height: 4.2rem;
				border: 1px solid rgba(59, 255, 255, 0.2);
				padding: 0.5rem;
				position: relative;

				img {
					width: 0.6rem;
					height: 0.6rem;
					position: absolute;
				}

				.img1 {
					top: -0.2rem;
					left: -0.2rem;
				}

				.img2 {
					top: -0.2rem;
					right: -0.2rem;
				}

				.img3 {
					bottom: -0.2rem;
					left: -0.2rem;
				}

				.img4 {
					bottom: -0.2rem;
					right: -0.2rem;
				}

				.span_box {
					span {
						width: 2.4rem;
						height: 3.2rem;
						background: url("../../assets/images/content/spanbj.png") no-repeat;
						background-size: 2.4rem 3.2rem;
						font-size: 2.4rem;
						font-family: Microsoft YaHei;
						color: #21d3ff;
						text-align: center;
						line-height: 3.2rem;
						margin-right: 0.5rem;
						display: block;
					}

					span:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.order_con1 {
			width: 45%;
			margin-right: 10%;

			// flex: 1;
			// width: 0;
			.order_span {
				width: auto;
				margin-top: 0.5rem;
			}
		}

		.order_con1:nth-child(2n+2) {
			margin-right: 0;

			p {
				text-align: right;
			}
		}
	}

	//   中间
	.leftcon_middle {
		height: 32%;

		.middle1 {
			flex: 1;
			margin-right: 2rem;
		}

		.middle2 {
			flex: 1;
		}
	}

	//   底部
	.leftcon_btm {
		flex: 1;
	}

	.echarts {
		width: 100%;
		height: 90%;
	}
}
</style>
